<template>
  <div class="buy-page">
    <RegisterHeader />
    <LayoutWidth>
      <div class="step-content">
        <el-steps :active="1"  align-center  class="my-step-content">
          <el-step title="1.确认订单信息"></el-step>
          <el-step title="2.付款到支付宝"></el-step>
          <el-step title="3.确认收货"></el-step>
        </el-steps>
      </div>
      <BuyAddress />
      <BuyGood />
      <div class="main-info">
        <div class="main-info-warp">
          <el-row>
            <div class="main-item">实付： ￥{{price}}</div>
          </el-row>
          <el-row>
            <div class="main-item">寄送至： {{address.province}} {{address.city}} {{address.region}} {{address.street}} {{address.detailed}} </div>
          </el-row>
          <el-row>
            <div class="main-item">收货人： {{address.consignee}} {{address.phone}}</div>
          </el-row>
          <el-row class="btn">
            <el-button type="primary" @click="createOrder">提交订单</el-button>
          </el-row>
        </div>
      </div>
    </LayoutWidth>
  </div>
</template>

<script>
import RegisterHeader from "../Register/Register-Header";
import LayoutWidth from "@/components/Layout-width";
import BuyAddress from './Buy-Address';
import BuyGood from './Buy-Good';

export default {
  data() {
    return {
      address: {},
      price: 0
    };
  },
  components: {
    RegisterHeader,
    LayoutWidth,
    BuyAddress,
    BuyGood
  },
  computed: {
    goodId() {
      return this.$route.query.projectId;
    },
    goodsProId() {
      return this.$route.query.goodsProId;
    }
  },
  methods: {
    async createOrder() {
      var { data } = await this.$http.post("/index.php/createOrder", {
        goodsProId: this.goodsProId,
        number: 1,
        goodsPrice: this.price,
        type: 1
      });
      console.log(data);
    }
  },
  mounted() {
    this.$bus.on('buy-info-address-change', (address) => {
      this.address = address;
    });
    this.$bus.on('buy-info-price-change', (price) => {
      this.price = price;
    });
  }
};
</script>

<style lang="less" scoped>
.step-content {
  padding-top: 50px;
}
.buy-page {
  padding-bottom: 40px;
}
.main-info {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  .main-info-warp {
    width: 500px;

    .main-item {
      padding: 10px 0;
    }
  }
}
.btn {
  display: flex;
  justify-content: flex-end;
}
</style>